<html lang="en" xml:lang="en"><head>
<META http-equiv="Content-Type" content="text/html">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><META name="description" content="The Chart widget displays quantitative attributes from an operational layer as a graphical representation of data."><meta name="content-language" content="en"><link href="rsrc/htmlhelp.css" rel="stylesheet" type="text/css"><title>Web AppBuilder for ArcGIS | Help - Chart widget
</title>
                <script type="text/javascript" language="JavaScript">
                    var pathL  = self.location.pathname.split ("/");
                    var fname = pathL[pathL.length-1];
                    var i = fname.lastIndexOf (".htm");
                    if (i>=0) {
                    fname = fname.substring (0, i)
                    } else {
                    //??
                    }
                    if (self.location.hash) {
				    		      fname = fname + self.location.hash;
						        }
                    self.location.replace ("../index.html#//" + fname);
                </script>
                </head><!--Publication GUID: [GUID-E7D1C130-8F87-4109-8D61-E73A46083F52]--><!--Topic GUID: [GUID-679335EC-B404-4FD2-A1D1-058692221471]--><body><div id="content"><div class="header"><h1>Chart widget
</h1><div id="breadcrumb"></div></div>
<div class="section1" id="GUID-427FD8E9-7F89-4FDD-981C-E39B8F23C663" purpose="section1"><h2>
</h2><p id="GUID-3069C1B0-3580-4F68-AB5D-B5AE3AC0DDC9"> The Chart widget displays quantitative attributes from an operational layer as a graphical representation of data. It makes it easier for end users to observe possible patterns and trends out of  raw data. The operational  layer can be:</p><ul purpose="ul" id="UL_02E191F41DB145E8A6C15293B2CB98F8"><li purpose="li" id="LI_84C90CD963274775800A95B08414D913">A  feature layer in the current map</li><li purpose="li" id="LI_8ECE25D624F146E5AAF6B2DD476135E7">A feature layer as an item in the portal</li><li purpose="li" id="LI_AC4261C17DF2453CA889C1DBCDC105BE">A feature layer  from ArcGIS Server REST  Service<div class="notes" id="GUID-7B2B8629-FF90-4B56-8F39-DE7D99DDAE93"><div class="tip"><img class="note_img" src="rsrc/tip.png" alt="Tip" title="Tip"><span>Tip:</span></div><div class="tipbody"><p id="GUID-6D50504D-B46B-4E7A-9DC3-AFFFFA91F7CA">A feature layer can be from a map service, feature service, or dynamic map service. It  also needs to support query capabilities to work with the Chart widget.</p></div></div></li></ul><p id="GUID-7B2846F3-8A64-41E1-B6D1-5BED838F50FE"> A chart can represent the attribute
values of a single field, aggregated values for multiple fields, or
the total counts for features. A bar or column chart can even
represent the attribute values of multiple fields as clustered
bars and columns. When using the Chart widget, you can also specify a
spatial filter to request only desired features to be in the
chart.</p><p id="GUID-39A9DF69-F2DB-4EFE-BB45-F45CD1280B7B">Generally, there are four options to analyze and calculate, then to display values of a feature layer as charts:</p><ul purpose="ul" id="UL_2EDBA5121BD9449E9843D581CABEA379"><li purpose="li" id="LI_2D1CF7B59CD24E34A05CF4912F6E0BBA"><span class="uicontrol">Display values feature by feature</span>—Displays values feature by feature. The chart depicts values of one or multiple fields for each feature in the layer. For example, in a cities layer, you may want to display the population for each city as a bar, column, line, or pie chart. You may also want to display the male and female population as clustered bars and columns per city. </li><li purpose="li" id="LI_D35FF0A3171F40198AC0E3021A38121A"><span class="uicontrol">Display values by category</span>—This chart depicts statistical values of one or multiple fields for each category of features in the layer. For example, in a cities layer, if you specify the state field as the category, you can display the total population for cities per state. </li><li purpose="li" id="LI_A821C7DB7B4241E99B8376DBA1BCD6DA"><span class="uicontrol">Display feature counts by category</span>—This chart depicts total feature counts for each category of features in the layer. For example, in a cities layer, you can specify the population class field as the category, and calculate the counts of cities in each population class. </li><li purpose="li" id="LI_00AE8289F7BD4484AB113CFDAD9EFD98"><span class="uicontrol">Display attribute values as charts</span>—This chart depicts the statistical value for a specified field or fields in the layer. For example, in a cities layer, you can display the total population as a bar for all cities in the year 2000, and the other bar for a total population of all cities in the year 2010. </li></ul><p id="GUID-4A213A2B-8810-4BB4-9B46-D841A68670C0"> When displaying attribute values as bars,
lines, or segments in a pie chart, a statistical operator is
performed on the field values. The aggregate can be  one of the
following:
</p><ul purpose="ul" id="UL_0133B2A27E3B4750ABE493B9C22CEFA3">
<li purpose="li" id="LI_2468C6BD88E14A5BADD17EF77F0169E5">

The average value
across features</li>
<li purpose="li" id="LI_62EB9B92F12B4899935E83003462A991">
The maximum value of all features
</li>
<li purpose="li" id="LI_E21709CE78484430BA11A0B61B44C7C6">
The minimum value of all features
</li>
<li purpose="li" id="LI_3E9414E1A29343BE9F2683E12BA32AB4">

The total
value of all features</li>
</ul></div>
<div class="section1" id="ESRI_SECTION1_DDBD4D2E6A354DBC868DA37BD0C9DE6F" purpose="section1"><h2>Configuring the Chart widget</h2><p id="GUID-40939448-F2F6-4075-9CD9-EA67EBC47D6F">The Chart widget can be set to open automatically when apps start. To do so, click the  dot on the widget to turn it dark green.</p></div><div class="wfsteps" purpose="wfsteps"><h4></h4><div class="context" id="ESRI_CONTEXT_AA4C90272B7E4BD2B683247B3D75427F" purpose="context"><p id="GUID-EDAAB3F9-5261-4E10-B417-0FD4F367A10F"> The Chart widget supports multiple chart tasks. Configure  the following parameters to make a chart:</p><ul purpose="ul" id="UL_3112067CD1254E82AA1ED04BFDC84331"><li purpose="li" id="LI_136BDEA93F944FACB53FD7826A1C8737">Set the <span class="uicontrol">Data Source</span>,<span class="uicontrol"> Chart Title</span>, and <span class="uicontrol">Description</span>.</li><li purpose="li" id="LI_46DF63EFFD3D44878F262D4F3734CB92">Select a way to analyze and display data.</li><li purpose="li" id="LI_AB5AFC5D1D1F4A18B8187FFB3AEFEC26">Set the chart appearance by specifying its types, display settings, and data  fields.</li><li purpose="li" id="LI_3CAF13B272F84331956935A6559E9B76">Set the map display for the data.</li></ul></div><div class="steps" id="GUID-CCB64297-6506-46F5-9010-7AE4DB1ED980"><div class="step_title">Steps:</div><ol>
<li purpose="step" id="ESRI_STEP_97DA5F894B744867B452AAE4FC97E19F"><span purpose="cmd" id="GUID-E4A9A8B7-3F3C-4741-B8DC-DB36E29D555C">Hover the mouse over the Chart widget and click the small edit icon
<img purpose="img" placement="inline" alt="Edit icon" title="Edit icon" src="03w3/GUID-31D329BD-BC73-4BBE-AE1D-3A1261BF912A-web.png">.</span><div class="stepresult" purpose="stepresult"><p id="GUID-9657CBF5-2983-49C8-A4A7-9BA34D300933">This opens the configuration window for the widget. If there are any existing chart tasks, they show in the window.  </p></div></li><li purpose="step" id="ESRI_STEP_9ED29A8ED49B43C286C401019EDB417A"><span purpose="cmd" id="GUID-A5CBD998-A8B8-4A84-A079-05B5B5A0F3B0">Optionally click the <span class="uicontrol">change widget icon</span> button if you want to replace the default icon for this widget. </span><div class="info" purpose="info"><p id="GUID-1EEF34F1-3917-448D-88ED-DC85AFC6D5C3">A file explorer window opens allowing you to browse to a  local image file to use as the widget icon.</p></div></li><li purpose="step" id="ESRI_STEP_A173E725079F48AD839559747E7B7527"><span purpose="cmd" id="GUID-FD4FF67E-83F1-4D80-8BB8-F572A4F893D4">Click <span class="uicontrol">Add New</span>  to create a new chart.</span><div class="stepresult" purpose="stepresult"><p id="GUID-6DB06CF9-0C4D-4D24-8DC9-2F6EA55005F2">This opens the <span class="uicontrol">Set Data Source</span> window. The data source can be from a layer in the current map, portal, or ArcGIS Server service. For this exercise, choose <span class="uicontrol">Add Service URL</span> and add a service URL.</p><div class="image" purpose="image"><table><tr><td><img class="break" src="03w3/GUID-6B99123C-BABA-45ED-A6D6-58FD86874A4A-web.png" purpose="img" alt="Set data source" title="Set data source"></td></tr></table></div></div></li><div class="stepinfo" purpose="stepinfo"><div class="notes" id="GUID-86395817-F65D-4947-AD65-0213443F7D5C"><div class="caution"><img class="note_img" src="rsrc/caution.png" alt="Caution" title="Caution"><span>Caution:</span></div><div class="tipbody"><p id="GUID-B1D98115-91B4-46C9-92AA-A7CDBCFBC9F8">Web AppBuilder  integrated in ArcGIS Online can access  public and secured services from ArcGIS Server. For secured services, however, it does not  support ArcGIS Server with Web Tier authentication, such as  IWA, PKI, or LDAP authentication. Refer to ArcGIS Online <a class="xref" target="_blank" rel="http://server.arcgis.com/en/portal/latest/use/arcgis-server-services.htm" href="http://server.arcgis.com/en/portal/latest/use/arcgis-server-services.htm">ArcGIS Sever web services</a> for more information.</p></div></div></div><li purpose="step" id="ESRI_STEP_1163AE05216243DBA71F11D142A01271"><span purpose="cmd" id="GUID-1B3A05BB-1A17-4016-AABE-8E3B51E0D82A">Click  <span class="uicontrol">OK</span>.</span><div class="stepresult" purpose="stepresult"><p id="GUID-3BD62DEC-0C14-4C46-BD91-4DEED7A8758A">This opens the <span class="uicontrol">Settings</span> tab. </p></div></li><li purpose="step" id="ESRI_STEP_AC9E69FEDBF046D18D887D4737A906C8"><span purpose="cmd" id="GUID-0264ABDC-4A3F-4C5C-BBDE-3CE04C2FEACE">Optionally  click the Data Source filter <img purpose="img" placement="inline" alt="Data source filter" title="Data source filter" src="03w3/GUID-56553FC2-2211-46E5-939D-349084DC6D57-web.png"> icon    beside the <span class="uicontrol">Data Source</span> field to create filter expressions for your data content.<div class="image" purpose="image"><table><tr><td><img class="break" src="03w3/GUID-135F07D5-EB4A-4955-B749-28B0DA20C270-web.png" purpose="img" alt="Filter data" title="Filter data"></td></tr></table></div></span></li><li purpose="step" id="ESRI_STEP_5FE595DB99B64903BCF6267419D4BFEE"><span purpose="cmd" id="GUID-219EF558-FC77-477F-9987-54D35332F470">Type  <span class="uicontrol">Chart Title</span> and <span class="uicontrol">Description</span>.</span></li><li purpose="step" id="ESRI_STEP_37BCE9260A31428D8132BBF895EDEFC5"><span purpose="cmd" id="GUID-42D1DEC4-3E4F-4508-8624-40CDB704878D">Click the <span class="uicontrol">Chart Display</span> drop-down arrow and choose <span class="uicontrol">Display values feature by feature</span>.</span><div class="info" purpose="info"><p id="GUID-6899563A-CA01-4E9B-96CA-4042890796FE">There are four options to analyze and calculate, then  display values of a feature layer in a chart. </p></div></li><li purpose="step" id="ESRI_STEP_8A6D55212B834147838D1DCCB274C33D"><span purpose="cmd" id="GUID-5EAFD35D-D5A2-4F38-A41E-16457302F9BB">The appearance of a chart is specified by  the chart type, color, value fields, and so on. It varies based on the display options of the chart.</span><ul purpose="choices" id="ESRI_CHOICES_C45972370BE242409C62D29FAA9B22AA"><li purpose="choice" id="ESRI_CHOICE_69E76F1AD40F45B2B2B312743C03731E">With <span class="uicontrol">Display values feature by feature</span>: <ol purpose="ol" id="OL_28E584BDBB594305BD7FB25B2B822902"><li purpose="li" id="LI_315A444E1CF74C14B10721F43A8278D6">Choose  one or multiple fields in the <span class="uicontrol">Value Fields</span>. If multiple fields are selected, they display as clustered bars and column charts. </li><li purpose="li" id="LI_57818D2552D04667B826DEA494AFE236">Choose a label from the <span class="uicontrol">Category Label</span> drop-down fields. You can sort the fields by clicking the  Sorting order icon<img purpose="img" placement="inline" alt="Sorting order icon" title="Sorting order icon" src="03w3/GUID-DAD5421C-CC37-474E-88B6-6B23BE267C72-web.png">.</li><li purpose="li" id="LI_190FCF1B954B43978CB46F509C23D3C4">Choose at least one <span class="uicontrol">Chart Type</span> and specify its display.<div class="image" purpose="image"><table><tr><td><img class="break" src="03w3/GUID-12980D34-A8D6-439C-8338-A231EA07291E-web.png" purpose="img" alt="Specify chart display" title="Specify chart display"></td></tr></table></div> </li></ol></li><li purpose="choice" id="ESRI_CHOICE_74BA00B57A9344219B730C693B496BF0">With <span class="uicontrol">Display values by category  </span>: <ol purpose="ol" id="OL_80A9A44A27F943B8B51F8AC78341BDFC"><li purpose="li" id="LI_F5F098C97E4446AEBAC1C4DBBF2304C5">Click the <span class="uicontrol">Category Field</span> drop-down list and choose a field. This field is used to categorize features and label categories. Click the Sorting order icon <img purpose="img" placement="inline" alt="Sorting order icon" title="Sorting order icon" src="03w3/GUID-DAD5421C-CC37-474E-88B6-6B23BE267C72-web.png"> to sort the fields if needed.</li><li purpose="li" id="LI_04BEA4BF8C104D2CB08BF43E0900561C">Choose  one or multiple fields in the <span class="uicontrol"> Value Fields</span>. If multiple fields are selected, they display as clustered bars and columns. </li><li purpose="li" id="LI_B5648F3D772C475FBED87115152C01DA">Choose an operation from the <span class="uicontrol">Operation</span> drop-down list. For aggregate values, four operations are supported: sum, average, minimum, and maximum.</li><li purpose="li" id="LI_E117D28B6C624EA69C0458DC6B227638">Choose at least one <span class="uicontrol">Chart Type</span> and specify its display.</li></ol></li><li purpose="choice" id="ESRI_CHOICE_34EC334E4B8044E08500F61F6ED93E81">With <span class="uicontrol">Display feature counts by category</span>:<ol purpose="ol" id="OL_FAFFA6E20F0942619A5318CEE6DAC4CB"><li purpose="li" id="LI_24086935A59141D7A39DCCB870A1524C">Click the<span class="uicontrol"> Category Field</span> drop-down  list and choose a field. This field is to categorize features and label categories. Click the Sorting order icon <img purpose="img" placement="inline" alt="Sorting order icon" title="Sorting order icon" src="03w3/GUID-DAD5421C-CC37-474E-88B6-6B23BE267C72-web.png"> to sort the fields if needed.</li><li purpose="li" id="LI_24314220B8834431B497CE293CAD36FE">Choose at least one <span class="uicontrol">Chart Type</span> and specify its display.</li></ol></li><li purpose="choice" id="ESRI_CHOICE_D239B8AEFFCE465EA45579CA6EFB2593">With <span class="uicontrol">Display attribute values as charts</span>:<ol purpose="ol" id="OL_B671868F5F594949B0A08D789D2C26A2"><li purpose="li" id="LI_9D179C708DE74432A6018E80C9B46C70">Choose  one or multiple fields in the <span class="uicontrol">Value Fields</span>. For each selected field, the statistical value displays separately as bars, columns, lines, or pie segments. </li><li purpose="li" id="LI_DF08DF18D25841C7891C414CBC8689A2">Choose an operation from the <span class="uicontrol">Operation</span> drop-down list. For aggregate values, four operations are supported: sum, average, minimum, and maximum.</li><li purpose="li" id="LI_22348A13254143E59D17DAA38DDBC05B">Choose at least one <span class="uicontrol">Chart Type</span> and specify its display.</li></ol></li></ul></li>
<li purpose="step" id="ESRI_STEP_B024009938644741BDAF098B9443476B"><span purpose="cmd" id="GUID-7FB356E4-A02C-4F6D-A615-82780E4233AA">Click the symbol beside <span class="uicontrol"> Selection Symbol</span> to set the symbol for the charted features on the map.</span></li><li purpose="step" id="ESRI_STEP_10418330D41D47CA8FD2CAB6AF80B454"><span purpose="cmd" id="GUID-45E01B2E-38AB-4D01-9218-5A88549F67A1">Click the color beside <span class="uicontrol">Highlight Color</span> to set the highlighted color for the charted features on the map when hovering over the chart.</span></li><li purpose="step" id="ESRI_STEP_D2BE8B059D2B44679C3CCB82D2F0193C"><span purpose="cmd" id="GUID-F4ED60D5-1BFA-452E-A411-170A978A76C0">Click the <span class="uicontrol">Preview</span> tab to preview the chart.  For Column, Bar, and Line chart type,  their axis labels automatically rotate in response to the density of the bars, columns, and lines. When more than one field in the Value Fields are selected, these types of chart support multiple colors for the clustered bars, columns, and lines. <div class="image" purpose="image"><table><tr><td><img class="break" src="03w3/GUID-64E039E9-AB74-4C8E-9429-E77FB3E13859-web.png" purpose="img" alt="Preview the chart" title="Preview the chart"></td></tr></table></div></span></li><li purpose="step" id="ESRI_STEP_FE2F47819D4B4C3380EA854F65AD50DC"><span purpose="cmd" id="GUID-A33AAB74-1F11-4571-A67D-547708788886">Repeat steps 3-11 to add more chart tasks.</span></li><li purpose="step" id="ESRI_STEP_B4BC6DA2DEC94E18AC6D1109B915E5F1"><span purpose="cmd" id="GUID-11E1830A-A907-4B88-AFC6-A61547A618F3">Click the  <span class="uicontrol">OK</span> button to finish the configuration.</span></li></ol></div></div>
<div class="section1" id="ESRI_SECTION1_10275307C5DF45D986A6922A5BBBE67B" purpose="section1"><h2>Using the Chart widget</h2><p id="GUID-46DAF4E8-D1CC-4D6B-8737-44AD8B24F41D">When the Chart widget is activated in the application, provide three inputs to run it:</p><ol purpose="ol" id="OL_2B3A000CABE94A26BE766F1C1DAF104A"><li purpose="li" id="LI_6DD09DF285EC4F9B855A5F4702E7A9F1">Select a task to execute the chart. </li><li purpose="li" id="LI_E03FCDFB01A44D4387911D59EDB45F7D">Make a spatial selection in the map  by using the current map extent or drawing a graphic on the map. If the spatial selection results into a valid selection set, the chart automatically displays in the <span class="uicontrol">Chart Results</span> tab when you click <span class="uicontrol">APPLY</span>.<div class="image" purpose="image"><table><tr><td><img class="break" src="03w3/GUID-36E8177A-6414-4F6E-B816-EFF209CB7CE7-web.png" purpose="img" alt="Use spatial filter" title="Use spatial filter"></td></tr></table></div></li><li purpose="li" id="LI_6103E4A963624D228B0A00FF54857610">Hovering over each individual piece in the chart displays the category  value and the field value, and the corresponding feature highlights on the map. Clicking each individual piece in the chart zooms to the charted features on the map. When more than one type of chart is configured, click the arrows to navigate through the individual types. <div class="image" purpose="image"><table><tr><td><img class="break" src="03w3/GUID-4ED0E851-EF14-4723-931F-8E8464B58509-web.png" purpose="img" alt="Chart results" title="Chart results"></td></tr></table></div></li><li purpose="li" id="LI_0FF50E3DC44D479CB150BDFA3430CC61">Click the Display setting<img purpose="img" placement="inline" alt="Display setting" title="Display setting" src="03w3/GUID-606083FD-CF82-422E-A285-9AFDE4A84A64-web.png"> icon to change the chart display if you don't like the predefined one. </li><li purpose="li" id="LI_2947995A508246F78ED034C1FCC95046">Click the Enlarge tool to view the chart better.</li></ol><div class="notes" id="GUID-D90AFAB5-5F05-4296-9EE2-AF6553B3B39D"><div class="tip"><img class="note_img" src="rsrc/tip.png" alt="Tip" title="Tip"><span>Tip:</span></div><div class="tipbody"><p id="GUID-27BAA3F2-A299-4CF0-9B29-B0FF7406BA66">The maximum features to display in a chart depends on    the <span class="usertext">maxRecordCount</span> property set in  the service.</p></div></div></div><div class="wfsummary" id="GUID-2AAAF252-7642-4C1F-8785-AFC3638D89E9" purpose="wfsummary">

</div>
<div class="footer"> Copyright © 1995-2016 Esri. All rights reserved. </div></div></body></html>